<%@ include file="/WEB-INF/views/include.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="t" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<%@ page import="com.bipbip.modelo.Producto"%>
<div class="container">
	<jsp:include page="error_alert.jsp"></jsp:include>
	<div class="pricing-container">
		<div class="flat">
			<div class="span3" style="margin-left: 0px;">
				<ul class="well plan plan1">
					<li class="plan-name">Gratuito</li>
					<li class="plan-price"><strong>$0</strong> / mes</li>
					<li class="plan-price"><strong>1 Vehiculo</strong></li>
					<li class="plan-price"><strong>Con Publicidad</strong></li>
					<li class="plan-price"><strong>0 Destacados</strong> / mes</li>
					<li class="plan-action" onclick="showSignupForm('freeAccount')"><a
						href="#info" class="btn btn-primary btn-large">Seleccionar</a></li>
				</ul>
			</div>

			<div class="span4" style="margin-left: 0px;">
				<ul class="well plan plan2 featured">
					<li class="plan-name">Premium</li>
					<li class="plan-price"><strong>U$S6</strong> / mes</li>
					<li class="plan-price"><strong>5 Vehiculos</strong></li>
					<li class="plan-price"><strong>Sin Publicidad</strong></li>
					<li class="plan-price"><strong>5 Destacados</strong> / mes</li>
					<li class="plan-price"><strong>Certificado BipBip!</strong></li>
					<li class="plan-action" onclick="showSignupForm('premiumAccount')"><a
						href="#info" class="btn btn-primary btn-large">Seleccionar</a></li>
				</ul>
			</div>

			<div class="span3" style="margin-left: 0px;">
				<ul class="well plan plan3">
					<li class="plan-name">Empresarial</li>
					<li class="plan-price"><strong>$199.99</strong> / month</li>
					<li class="plan-price"><strong>5 Vehiculos</strong> c/empleado</li>
					<li class="plan-price"><strong>Publicidad Empresarial</strong></li>
					<li class="plan-price"><strong>1000 empleados</strong></li>
					<li class="plan-price"><strong>Certificado BipBip!</strong> c/empleado</li>
					<li class="plan-action"
						onclick="showSignupForm('enterpriseAccount')"><a href="#info"
						class="btn btn-primary btn-large">Seleccionar</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div id="info" class="flat">
		<div class="well">
			<div id="freeAccount" class="hide">
				<h4>
					Producto:
					<h3>Gratuito</h3>
				</h4>
				<hr>
				<form:form method="post" action="signup" class="form-horizontal">
					<input type="hidden" name="idProducto" value="1" />
					<label>Nombre</label>
					<input id="nombre" name="nombre" type="text" class="input-xlarge" />
					<label>Apellido</label>
					<input type="text" id="apellido" name="apellido"
						class="input-xlarge" />
					<label>Email</label>
					<input type="text" id="email" name="email" class="input-xlarge" />
					<label>Password</label>
					<input type="password" id="password" name="password"
						class="input-xlarge" />
					<div>
						<button class="btn btn-primary">Crear cuenta</button>
					</div>
				</form:form>
			</div>
			<div id="premiumAccount" class="">
				<h4>
					Producto:
					<h3>Premium</h3>
				</h4>
				<hr>
				<form:form method="post" action="signup" class="form-horizontal">
					<input type="hidden" name="idProducto" value="2" />
					<label>Nombre</label>
					<input id="nombre" name="nombre" type="text" class="input-xlarge"
						required="required" />
					<label>Apellido</label>
					<input type="text" id="apellido" name="apellido"
						class="input-xlarge" required="required" />
					<label>Email</label>
					<input type="text" id="email" name="email" class="input-xlarge"
						required="required" />
					<label>Password</label>
					<input type="password" id="password" name="password"
						class="input-xlarge" required="required" />
					<div>
						<a href="#myModal" role="button" class="btn btn-primary"
							data-toggle="modal">Crear Cuenta</a>
					</div>
				</form:form>
			</div>
			<div id="enterpriseAccount" class="hide">
				<h4>
					Producto:
					<h3>Empresarial</h3>
				</h4>
				<hr>
				<h4>Empresa</h4>
				<form:form method="post" action="signup" class="form-horizontal">
					<label>Razon Social</label>
					<input id="empresa" name="empresa" type="text" class="input-xlarge"
						required="required" />
					<label>Ubicacion</label>
					<input id="nombre" name="nombre" type="text" class="input-xlarge"
						required="required" />
					<label>Cantidad de Empleados</label>
					<input type="text" id="apellido" name="apellido"
						class="input-xlarge" required="required" />
				</form:form>
				<hr>
				<h4>Administrador</h4>
				<form:form method="post" action="signup" class="form-horizontal">
					<input type="hidden" name="idProducto" value="3"
						required="required" />
					<label>Nombre</label>
					<input id="nombre" name="nombre" type="text" class="input-xlarge"
						required="required">
					<label>Apellido</label>
					<input type="text" id="apellido" name="apellido"
						class="input-xlarge" required="required">
					<label>Email</label>
					<input type="email" id="email" name="email" class="input-xlarge"
						required="required">
					<label>Password</label>
					<input type="password" id="password" name="password"
						class="input-xlarge" required="required">
					<div>
						<a href="#myModal" role="button" class="btn btn-primary"
							data-toggle="modal">Crear Cuenta</a>
					</div>
				</form:form>
			</div>
		</div>
	</div>
</div>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">&times;</button>
		<h3 id="myModalLabel">Paypal</h3>
	</div>
	<div class="modal-body">
		<p>
		<h3>Ooops!</h3>
		<h4>Discule, estamos trabajando para ofrecerle un mejor servicio</h4>
		</p>
		<img alt="" src="<s:url value="/resources/img/paypal.jpg" />"
			width="200" height="150">
	</div>
	<div class="modal-footer">
		<button class="btn" data-dismiss="modal" aria-hidden="true">Ok</button>
	</div>
</div>
<script type="text/javascript">
	function showSignupForm(id) {
		var sib = $('#' + id).siblings();

		for ( var i = 0; i < sib.length; i++) {
			$('#' + sib[i].id).hide();
		}

		$('#' + id).show();
	}

	
</script>